<template>
	<view class="recommend bg-color">
		<view class="recommend-item" v-for="(item,index) in dataList" :key="index">
			<image class="item-big" :src="item.bigUrl" mode=""></image>
			<view class="item-small">
				<image class="item-small-img" v-for="(k,i) in item.data" :key="i" :src="k.imgUrl" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "recommend",
		props:{
			dataList:Array
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.recommend {
		padding: 20rpx;
		.recommend-item {
			border-radius: 20rpx;
			border: 2rpx solid #cccccc;
			overflow: hidden;
			margin: 20rpx 0;

			.item-big {
				width: 100%;
				height: 300rpx;
			}

			.item-small {
				display: flex;
				width: 100%;
				height: 240rpx;

				.item-small-img {
					flex: 1;
					height: 240rpx;
				}
			}
		}
	}
</style>
